<template>
	<n-card :title="expName">
		<!-- <h3>密里根油滴实验</h3> -->
		<el-table :data="tableData" style="width: 100%">
			<!-- <el-table-column
				prop="date"
				label="截止日期"
				width="180"
			></el-table-column> -->
			<el-table-column prop="name" label="班级"></el-table-column>
			<!-- <el-table-column prop="info" label="实验状态" width="180"> -->
			<!-- <template #default="scope"> -->
			<!-- <el-tag type="info" prop="type" @click="test(scope)">{{
					tableData[1].info
				}}</el-tag> -->
			<!-- </template> -->
			<!-- </el-table-column> -->
			<el-table-column label="操作" width="180">
				<template #default="scope">
					<el-button
						type="success"
						size="small"
						@click="goToCheckExp(scope.row)"
						>开始批阅</el-button
					>
					<span ref="remind" id="remind" ><svg t="1699345470823" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="1656" width="16" height="16">
							<path
								d="M511.999907 511.999907m-511.999907 0a511.999907 511.999907 0 1 0 1023.999814 0 511.999907 511.999907 0 1 0-1023.999814 0Z"
								fill="#FF7650" p-id="1657"></path>
							<path
								d="M466.087479 2.029381A518.050815 518.050815 0 0 1 511.999907 0c282.763585 0 511.999907 229.227013 511.999907 511.999907 0 8.68538-0.195491 17.314906-0.633018 25.897886-15.12727 1.349818-30.440722 2.029381-45.912428 2.029382-282.763585 0-511.999907-229.227013-511.999907-511.999907 0-8.68538 0.2048-17.314906 0.633018-25.897887z"
								fill="#FFFFFF" opacity=".1" p-id="1658"></path>
							<path
								d="M214.109052 928.460631V875.054386h37.236357V614.399888c0-128.074449 92.364783-234.561121 214.109052-256.511953V279.272676h93.090892v78.615259C680.289622 379.838767 772.654405 486.325439 772.654405 614.399888v260.654498h37.236357v53.406245c-5.613381 4.030836-11.34778 7.959271-17.128724 11.75738H231.237776A510.529071 510.529071 0 0 1 214.109052 928.460631zM577.163531 567.854442h65.163625v260.654498h-65.163625V567.854442z"
								fill="#F8F0EF" p-id="1659"></path>
							<path
								d="M642.327156 1007.262071A512.88427 512.88427 0 0 1 511.999907 1023.999814c-45.037374 0-88.71562-5.818181-130.327249-16.737743V986.763457h260.654498v20.498614z"
								fill="#F8F0EF" p-id="1660"></path>
							<path d="M577.163531 567.854442h65.163625v260.654498h-65.163625z" fill="#FF7650" p-id="1661">
							</path>
						</svg>
					</span>
					<!-- <el-button type="warning" size="small">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>
	</n-card>
</template>
<script setup lang="ts">
//@ts-nocheck
const route = useRoute()
const router = useRouter()
import { getStudent } from '@/api/request'
onMounted(() => {
	// console.log('实验的代号', route.params.scope)
	// expId.value = localStorage.getItem('expId')
	// console.log(expId)
	// console.log('实验名称是', expName)
	const jwtToken = localStorage.getItem('jwtToken')
	const cid = route.query.cid
	console.log(route.query.cid)
	// console.log(router)
	getStudent(jwtToken, cid).then((res) => {
		console.log(res, '返回的学生数据')
		// console.log(res, '返回的数据')
		result.value = res.data.data

		// 处理result的数据
		result.value = result.value.map((item) => ({
			sid: item.sid,
			cid: item.cid,
			name: item.name,
			updateTime: item.updateTime,
			state: 0,
			eid: '',
		}))
		console.log('处理后的result', result.value)
		// 处理classList的数据
		classList.value = classList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			exps: result.value,
			state: '0',
		}))
	})
})
var expId = ref(0)
// 定义计算属性名为Id，根据expId的值，返回对应的实验名称
const expName = computed(() => {
	// 根据expId的值，为1时返回实验一，2时返回实验二，3时返回实验三
	var name = ''
	if (expId.value == 0) {
		name = '液体粘滞系数的测定'
	} else if (expId.value == 1) {
		name = '密立根液体表面张力系数的测定油滴实验'
	} else if (expId.value == 2) {
		name = '用牛顿环仪测量透镜的曲率半径'
	} else if (expId.value == 3) {
		name = '迈克尔逊干涉仪的调节与使用'
	}
	return name
	// return expLists.value.find((item) => item.id === route.params.scope).name
})

// 计算属性，定义title，当
const tableData = ref([
	{
		id: '0',
		date: '2016-05-03',
		name: '计算机科学与技术一班',
		address: 'No. 189, Grove St, Los Angeles',
		type: 'success',
		info: '已完成',
	},
	{
		id: '1',

		date: '2016-05-02',
		name: '计算机科学与技术二班',
		address: 'No. 189, Grove St, Los Angeles',
		type: 'warning',
		info: '待审批',
	},
	{
		id: '2',
		date: '2016-05-04',
		name: '计算机科学与技术三班',
		address: 'No. 189, Grove St, Los Angeles',
		type: 'danger',
		info: '未通过',
	},
	{
		id: '3',
		date: '2016-05-01',
		name: '计算机科学与技术四班',
		address: 'No. 189, Grove St, Los Angeles',
		type: 'info',
		info: '待审批',
	},
])

const goToCheckExp = (id) => {
	console.log('班级的id', id.id)
	localStorage.setItem('className', id.name)
	localStorage.setItem('classId', id)
	router.push(`/review-student/${id.name}`)
}
</script>

<style lang="less" scoped>
.bottom-content {
	padding: 14px;
	text-align: center;
	.bottom {
		margin-top: 13px;
		line-height: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		.button {
			padding: 18px;
			min-height: auto;
		}
	}
}

.image {
	width: 100%;
	display: block;
}
#remind {
	display: inline-block;
	margin-left: 10px;
	padding-top: 18px;
	line-height: 20px;
	align-items: center;
	opacity: 1;
}
</style>
